<!--
 * @FileDescription: 超级无敌table组件
 * @Author: XD
 * @Date: 10-15-2020
 * @LastEditors: 10-15-2020
 * @LastEditTime: 10-15-2020
 -->


<template>
    <el-dialog :title="this.title"
               :visible.sync="this.privateVisible"
               :before-close="handleClose"
               :modal-append-to-body="false"
               :close-on-click-modal="false" 
               width="50%">
        <el-form ref="ruleForm"
                 label-width="200px"  
        >

  
            <template v-for="(item,index) in this.privateConfig.table">

                <!--        文字-->
                <el-form-item
                        :key="index"
                        v-if="!item.addEditType && !item.addEditHidden"
                        :label="item.label"
                >
<!--                    当数据类型为int-->
                    <el-input v-if="item.dataType=='int'"
                              v-model="item.value"
                              placeholder="请输入数字"
                              onkeyup="value=value.replace(/[^\d]/g,'')"
                    ></el-input>
                    <el-input v-else v-model="item.value"></el-input>
                </el-form-item>

                <!-- 单选框-->
                <el-form-item
                        :key="index"
                        v-if="item.addEditType=='radio'"
                        :label="item.label"
                >

                    <el-radio v-model="item.value" v-for="(a,index) in item.list" :label="a.value" :key="index">{{a.label}}</el-radio>

                </el-form-item>

                <!--        网络下拉选择框-->
                <el-form-item
                        :key="index"
                        v-if="item.addEditType=='netDropDown'"
                        :label="item.label"
                >
                    <el-select v-model="item.value"
                               placeholder="请选择"
                               @focus="netDropDown(index, item.callback())"
                    >
                        <el-option
                                v-for="(item, i) in b[index]"
                                :key="i"
                                :label="item.label"
                                :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <!--            下拉选择框-->
                <el-form-item
                        :key="index"
                        v-if="item.addEditType=='dropDown'"
                        :label="item.label"
                >
                    <el-select v-model="item.value" placeholder="请选择">
                        <el-option
                                v-for="item in item.list"
                                :key="item.key"
                                :label="item.label"
                                :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <!--            时间选择器 Date-->
                <el-form-item
                        :key="index"
                        v-if="item.addEditType=='timePicker'"
                        :label="item.label"
                >
                    <el-date-picker
                            v-model="item.value"
                            type="date"
                            @change="dateChanged(item.value, index)"
                            placeholder="请选择"
                            :picker-options="pickerOptionsStart"
                    >

                    </el-date-picker>
                </el-form-item>

                <!--            时间选择器 datetime-->
                <el-form-item
                        :key="index"
                        v-if="item.addEditType=='timePickerDateTime'"
                        :label="item.label"
                >
                    <el-date-picker
                            v-model="item.value"
                            type="datetime"
                            @change="dateTimeChanged(item.value, index)"
                            placeholder="请选择">
                    </el-date-picker>

                </el-form-item>

                <!--            上传-->
                <el-form-item
                        :key="index"
                        v-if="item.addEditType=='upload'"
                        :label="item.label"
                >

                    <el-upload

                            class="upload-demo"
                            action="/"
                            @click.native.prevent="nothing"
                            :on-remove="handleRemove"
                            :limit="3"
                            :file-list="fileList[index]"
                    >
                        <el-button size="small" type="primary" @click.native.stop="uploadClick(index)"
                        >选择文件</el-button
                        >
                    </el-upload>
                </el-form-item>


<!--                插槽-->
                <el-form-item
                        :key="index"
                        v-if="item.addEditType=='slot'"
                        :label="item.label"
                >
                    <template></template>
                </el-form-item>


            </template>

        </el-form>

        <input style="visibility: hidden" id="customInput" @change="uploadFunc" type="file"></input>


        <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="add('ruleForm')">确 定</el-button
        ></span>

    </el-dialog>
</template>

<script>
    import {OSSDelete, OSSupload} from "../../../tools/oss";
    import {loadDropDown} from "./request";

    export default {
        props: ['config','title','visibilityUpdate'],
        data() {
            return {
                //网络请求回来的下拉框
                b: [[{label:"s",value:2}],[{label:"s",value:2}],[{label:"s",value:2}]],
                ruleForm: {}, //返回的数据
                fileList: [], //上传图片
                fileListIndex: -1, //图片index
                privateTitle: '',
                privateVisible: false,
                privateConfig: {
                    table: [],
                },
                pickerOptionsStart: {
                    disabledDate(time) {
                        return time.getTime() < 1488297600000 || time.getTime() >= Date.now();
                    },
                },

            }
        },
        methods: {

            // 网络下拉框处理
            netDropDown(index, params) {
                loadDropDown(params.url).then(response=>{
                    let list = response.data.list
                    let a = list.map(item=>({
                        label: item[params.labelProp],
                        value: item[params.valueProp]
                    }))
                    this.b[index] = a
                    this.$forceUpdate()
                }).catch(err=>{
                    return [{ label: err, value: "" }]
                })
            },



            // 添加
            add(formName) {

                //处理照片url
                let t = this.privateConfig.table
                for(var i=0;i<t.length;i++) {
                    // 处理上传
                    if(t[i].addEditType=='upload') {
                        var temp = ""

                            for(var j=0;j<this.fileList[i].length;j++) {
                                if (j==0) {
                                    temp += (this.fileList[i][j].url)
                                }else{
                                    temp += (","+this.fileList[i][j].url)
                                }
                            }
                            t[i].value = temp

                    }
                }

                // 处理上传数据
                let form = t
                for (var i=0;i<form.length;i++) {
                    if (form[i].addEditHidden==false||form[i].addEditHidden==null) {
                        this.ruleForm[form[i].prop] = form[i].value
                    }

                }

                this.$emit('formChange', this.ruleForm)
                this.privateVisible = false
            },

            // 初始化
            initConfig() {

                this.privateConfig.table = this.config
                let t = this.privateConfig.table
                for(var i=0;i<t.length;i++) {
                    if (t[i].addEditType=='upload') {
                        if (t[i].value !="") {
                            if (t[i].value.indexOf(',')!=-1) {
                                let split = t[i].value.split(',')
                                if (split.length > 1) {
                                    for(var j=0;j<split.length;j++) {
                                        if (split[j] !="") {
                                            let name = split[j].split('-Ryan-')[1]
                                            this.fileList[i].push({name: name, url: split[j]})
                                        }
                                    }
                                }
                            }else{
                                let name = t[i].value.split('-Ryan-')[1]
                                this.fileList[i].push({name: name, url: t[i].value})
                            }
                        }
                    }
                }
            },

            // 关闭
            handleClose() {
                this.privateVisible = false
                let that = this
                setTimeout(function () { that.cleanData(); }, 300);
            },


            // date转换
            dateChanged(value, index){
                this.privateConfig.table[index].value = this.dateFilterData(value)
            },
            dateFilterData(input) {
                var d = new Date(input);
                var year = d.getFullYear();
                var month =
                    d.getMonth() < 9 ? "0" + (d.getMonth() + 1) : "" + (d.getMonth() + 1);
                var day = d.getDate() < 10 ? "0" + d.getDate() : "" + d.getDate();

                return year + "-" + month + "-" + day;
            },

            // dateTime转换
            dateTimeChanged(value, index) {
                this.privateConfig.table[index].value = this.dateFilter(value)
            },
            dateFilter(input) {
                var d = new Date(input);
                var year = d.getFullYear();
                var month =
                    d.getMonth() < 9 ? "0" + (d.getMonth() + 1) : "" + (d.getMonth() + 1);
                var day = d.getDate() < 10 ? "0" + d.getDate() : "" + d.getDate();
                var hh = d.getHours() < 10 ? "0" + d.getHours() : "" + d.getHours();
                var mm = d.getMinutes() < 10 ? "0" + d.getMinutes() : "" + d.getMinutes();
                var ss = d.getSeconds() < 10 ? "0" + d.getSeconds() : "" + d.getSeconds();
                return year + "-" + month + "-" + day + " " + hh + ":" + mm + ":" + ss;
            },



            // 选择文件上传
            handleRemove(file) {
                let name = file.name;



                for (var i = 0; i < this.fileList.length; i++) {
                    for (var j = 0; j < this.fileList[i].length; j++) {
                        console.log(this.fileList[i][j].url)
                        if (this.fileList[i][j].url) {
                            if (this.fileList[i][j].url.indexOf(name) >= 0) {
                                // OSSDelete(this.fileList[i][j].url).then((res) => {
                                //     console.log(res);
                                // });

                                this.fileList[i].splice(j, 1);
                            }
                        } else {
                            this.fileList[i][j].url = ""
                        }
                    }
                }
            },

            dialogClose() {

            },
            uploadClick(index) {
                if (document.getElementById("customInput")) {
                    document.getElementById("customInput").value = ''
                }
                this.fileListIndex = index
                var e = document.createEvent("MouseEvents");
                e.initEvent("click", true, true);
                document.getElementById("customInput").dispatchEvent(e);
            },
            uploadFunc(event) {
                const files = event.target.files;
                let name = files[0].name;
                this.fileList[this.fileListIndex].push({ name: name, url: "" });
                OSSupload(files).then((urls) => {
                    let index = this.fileList[this.fileListIndex].length - 1;
                    this.fileList[this.fileListIndex][index].url = urls[0];
                });
            },

            // 清除数据
            cleanData() {
                this.arr = {}
                this.fileList = [
                    [],[],[],[],[],[],[],[],[],[],
                    [],[],[],[],[],[],[],[],[],[],
                    [],[],[],[],[],[],[],[],[],[],
                    [],[],[],[],[],[],[],[],[],[],
                    [],[],[],[],[],[],[],[],[],[],
                    [],[],[],[],[],[],[],[],[],[],
                    [],[],[],[],[],[],[],[],[],[],
                    [],[],[],[],[],[],[],[],[],[],
                    [],[],[],[],[],[],[],[],[],[],
                    [],[],[],[],[],[],[],[],[],[]
                ]
                this.fileListIndex = -1
                this.privateConfig.table = []
                if (document.getElementById("customInput")) {
                    document.getElementById("customInput").value = ''
                }
            },

            nothing() {}


        },
        watch: {
            "visibilityUpdate": function () {

                // 肥肠重要
                this.cleanData()

                this.initConfig()
                this.privateVisible = true
            },

        }
    }
</script>

<style scoped>

</style>